<template>
  <div class="full-box pie02">
    <v-chart className="chart" :option="chartOption" autoresize/>
  </div>
</template>

<script>
import refreshMixin from "@/package/widget/mixins/refreshMixin";
import vChart from "vue-echarts";
import {graphic} from "echarts";

export default {
  name: 'pie02',
  cnName: '进度',
  mixins: [refreshMixin],
  components: {vChart},
  data() {
    return {
      chartOption: {}
    }
  },
  methods: {
    loadDataOk() {
      const attribute = this.option.attribute
      let opt = {
        ...attribute
      }

      const {value, max} = this.cptData
      const per = value / max * 100
      const perStr = per.toString().indexOf('.') !== -1 ? per.toFixed(2) : per
      opt.title[0].text = perStr + '%'
      opt.angleAxis.max = max

      const labelData = []
      const steps = attribute.pie.steps
      for(let i = 0; i < steps; i++) {
        labelData.push({
          value: 1,
          name: i,
          itemStyle: {
            color: attribute.pie.backgroundColor
          }
        })
      }

      labelData.forEach((item, i) => {
        if(i < per * steps / 100) {
          item.itemStyle = {
            color: new graphic.LinearGradient(0, 0, 1, 0,
                [{
                  offset: 0,
                  color: attribute.pie.colors[0]
                },
                  {
                    offset: 1,
                    color: attribute.pie.colors[1]
                  }
             ])
          }
        }
      })


      const series = []

      if(attribute.bar.show) {
        series.push({
          name: '',
          type: 'bar',
          roundCap: true,
          showBackground: true,
          backgroundStyle: {
            color: attribute.bar.backgroundColor,
          },
          data: [value],
          coordinateSystem: 'polar',
          itemStyle: {
            color: new graphic.LinearGradient(0, 1, 0, 0, [{
              offset: 0,
              color: attribute.bar.colors[0]
            }, {
              offset: 1,
              color: attribute.bar.colors[1]
            }])
          }
        })
      }

      if(attribute.pie.show) {
          series.push({
            hoverAnimation: false,
            type: 'pie',
            z: 2,
            data: labelData,
            radius: attribute.pie.radius,
            zlevel: -2,
            itemStyle: {
              normal: {
                borderColor: attribute.pie.borderColor,
                borderWidth: 2,
              }
            },
            label: {
              normal: {
                position: 'inside',
                show: false,
              }
            },
          })
      }


      opt.series = series

      this.chartOption = opt
    }
  },
  watch: {
    'option.attribute': {
      handler(newVal) {
        this.loadDataOk(newVal)
      },
      deep: true
    }
  },
  mounted() {
  }
}
</script>

